<template>
  <el-dialog
    class="corp-add-member-comp"
    title="添加成员"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    append-to-body
    :visible="visible"
    :width="$setRem(1200)"
    :before-close="handleCancel"
  >
    <div style="text-align: center">
      <el-transfer
        v-model="selectData"
        filter-placeholder="姓名/用户名"
        filterable
        :filter-method="filterMethod"
        :titles="['全选', '已选']"
        :button-texts="['取消', '添加']"
        @change="handleChange"
        :data="tableData"
      >
        <span
          slot-scope="{ option }"
          :class="['slot-content', option.key === 'custom' ? 'header' : '']"
        >
          <span class="name">{{ option.userName }}</span>
          <span class="user">{{ option.userId }}</span>
          <span class="tel">{{ option.telephoneNumber }}</span>
        </span>
        <span
          slot="left-footer"
          class="footer-tip"
          title="若要新增该项目的成员，请移至用户管理-个人信息模块中维护信息"
        >
          若要新增该项目的成员，请移至用户管理-个人信息模块中维护信息
        </span>
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="hanldeSave"
      >
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 参数id
    id: {
      type: String,
      default: ""
    },
    // 参数对象
    options: {
      type: Object,
      default: () => ({})
    },
    // 获取源数据
    getData: {
      type: Function,
      default: () => () => {}
    }
  },
  data() {
    return {
      condition: "",
      tableData: [],
      tableLoading: false,
      pageNo: 1,
      pageSize: 10000,
      selectData: []
    };
  },
  watch: {
    visible(value) {
      if (value) {
        this.getTableData();
        return;
      }
      this.selectData = [];
    }
  },
  methods: {
    /**
     * 获取列表数据
     */
    async getTableData() {
      this.tableLoading = true;
      const params = {
        pageNum: this.pageNo,
        id: this.id,
        pageSize: this.pageSize,
        condition: this.condition,
        type: "2", // 1：已选择用户；2：未选择用户
        ...this.options
      };
      const {
        success,
        data: { data }
      } = await this.getData(params);
      this.tableLoading = false;
      if (success && data) {
        const list = data.list || [];
        this.tableData = list.map(item => {
          return {
            key: item.uuid,
            ...item
          };
        });
        this.total = data.total || 0;
      }
    },
    handleSearch() {
      this.clear();
      this.getTableData();
    },
    // 清除参数
    clear() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
      this.tableLoading = false;
      this.tableData = [];
    },
    filterMethod(val, item) {
      const userName = item.userName || "";
      const userId = item.userId || "";
      return userName.indexOf(val) > -1 || userId.indexOf(val) > -1;
    },
    handleChange(value, direction, keys) {
      // console.log(value, direction, keys);
    },
    // 保存
    hanldeSave() {
      if (!this.selectData.length) {
        return this.$message.warning("请勾选选项");
      }
      this.$emit("submit", this.selectData);
    },
    // 取消
    handleCancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../../assets/styles/dialog";

.corp-add-member-comp {
  /deep/ .el-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    .el-transfer-panel {
      width: 450px;
      .el-transfer-panel__filter {
        margin: 10px auto;
        width: calc(100% - 30px);
      }
      .el-transfer-panel__body {
        height: 450px;
        text-align: center;
        .el-transfer-panel__list.is-filterable {
          height: calc(100% - 50px);
          text-align: left;
          /*.el-transfer-panel__item:nth-child(1) {*/
          /*  .el-checkbox__input {*/
          /*    display: none;*/
          /*  }*/
          /*  .el-checkbox__label {*/
          /*    margin-bottom: 10px;*/
          /*    background-color: #f1f1f1;*/
          /*  }*/
          /*}*/
        }
        .slot-content {
          .name,
          .user {
            width: 120px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: middle;
          }
          .tel {
            width: 100px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }
    }
    .el-transfer__buttons {
      display: flex;
      flex-direction: column;
      .el-button + .el-button {
        margin-left: 0;
      }
    }
    .footer-tip {
      font-size: 12px;
      color: $lightBtnBg;
      padding: 0 15px;
      width: 100%;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 30px;
    }
  }
}
</style>
